<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>计算属性</title>
</head>
<body>
  <div id="root">
    <h2>计算属性案例</h2>
    <hr>
    <input type="text" v-model="firstname">
    <input type="text" v-model="lastname">
    <h4>{{fullName}}</h4>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false 
    const vm = new Vue({
      el: '#root',
      data:{
        firstname:'张',
        lastname:'三'
      },
      computed: {
        // fullName: {
        //   get() {
        //     return this.firstname + `-`+ this.lastname
        //   },
        //   set(value) {
        //     const arr = value.split('-')
        //     this.firstname = arr[0]
        //      this.lastname = arr[1]
        //   }
        // }
        fullName() {
          return this.firstname + `-`+ this.lastname
        }
      }
    })
  </script>
</body>
</html>